<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>新增页面</h4>
<!--收集新增数据-->
<form action="#" method="post">
    用户名：<input type="text" name="username" id="username"> <br>
    密码：<input type="password" name="password" id="password"> <br>
    年龄：<input type="number" name="age" id="age"> <br>
    电话：<input type="text" name="phone" id="phone"> <br>
    状态：
    <input type="checkbox" name="status" value="1" checked >启用
    <input type="checkbox" name="status" value="0" >禁用
    <br>
    <input type="button" id="btn" value="提交" >
</form>

</body>
</html>
<script src="js/axios-0.18.0.js"></script>
<script>
    //为提交按钮绑定单击事件 提交ajax请求
    document.querySelector("#btn").onclick=function () {

        //收集到表单中的数据
        //定义空对象
        var emp = {
            userName:"",
            passWord:"",
            age:"",
            phone:"",
            status:""
        }

        //将表单项中的内容收集为对象的属性
        let username = document.getElementById("username").value;
        emp.userName=username;

        let password = document.getElementById("password").value;
        emp.passWord=password;

        let age = document.getElementById("age").value;
        emp.age=age;

        let phone = document.getElementById("phone").value;
        emp.phone=phone;

       var statuses =  document.getElementsByName("status");
       //判断勾选
        for (let i = 0; i < statuses.length; i++) {
            if(statuses[i].checked){
                emp.status = statuses[i].value;
            }
        }
        console.log(emp);


        //通过axios将数据提交的服务器中
      axios({
          method:"post",
          url:"http://localhost:8080/javaweb15/employee/addEmp",
          data:emp
      }).then(function (resp) {
          console.log(resp.data)
          if(resp.data){
              alert("新增"+username+"成功");
              //查询全部
              location.href="http://localhost:8080/javaweb15/list.html";
          }
      })

    }

    /*自己尝试删除和修改  ajax完成*/

</script>